// 我的经办--详情
<template>
  <div class="box">
    <span class="auditStatus">
      <span v-if="AppInformation.auditStatus === 0">草稿</span>
      <span v-if="AppInformation.auditStatus === 1">待审核</span>
      <span v-if="AppInformation.auditStatus === 2">审核中</span>
      <span v-if="AppInformation.auditStatus === 3">已审核</span>
      <span v-if="AppInformation.auditStatus === 4">审核通过</span>
      <span v-if="AppInformation.auditStatus === 5">审核拒绝</span>
    </span>
    <table>
      <h5>申请信息</h5>

      <tr>
        <td>申请人：</td>
        <td>{{ AppInformation.name }}</td>
      </tr>
      <tr>
        <td>提交时间：</td>
        <td>{{ AppInformation.addTime }}</td>
      </tr>
      <tr>
        <td>状态：</td>
        <td>
          <span v-if="AppInformation.auditStatus === 0">草稿</span>
          <span v-if="AppInformation.auditStatus === 1">待审核</span>
          <span v-if="AppInformation.auditStatus === 2">审核中</span>
          <span v-if="AppInformation.auditStatus === 3">已审核</span>
          <span v-if="AppInformation.auditStatus === 4">审核通过</span>
          <span v-if="AppInformation.auditStatus === 5">审核拒绝</span>
        </td>
      </tr>
    </table>
    <table>
      <h5>申请内容</h5>
      <tr>
        <td>标题：</td>
        <td>{{ AppInformation.title }}</td>
      </tr>
      <tr>
        <td>施工班组合同：</td>
        <td>
          <div class="hyperlinks" @click="hyperlinksClick()">
            {{ AppInformation.constructionTeamContractName }}
          </div>
        </td>
      </tr>
      <tr>
        <td>关联项目：</td>
        <td>{{ AppInformation.relatedProjectsName }}</td>
      </tr>
      <tr>
        <td>拟付款时间：</td>
        <td>{{ AppInformation.expectedDateOfPayment }}</td>
      </tr>
      <tr>
        <td>付款金额：</td>
        <td>{{ AppInformation.paymentAmount }}万</td>
      </tr>
      <tr>
        <td>收款账户</td>
        <td class="RowHeight">
          <div class="yinhang">
            <tr>
              <td>户名：</td>
              <td>{{ AppInformation.bankAccountName }}</td>
            </tr>
            <tr>
              <td>开户行：</td>
              <td>{{ AppInformation.bankOpeningBank }}</td>
            </tr>
            <tr>
              <td>账户：</td>
              <td>{{ AppInformation.bankAccountNum }}</td>
            </tr>
          </div>
        </td>
      </tr>
      <tr>
        <td>合同付款备注：</td>
        <td>{{ AppInformation.notesOnContractPayment }}</td>
      </tr>
      <tr>
        <td>是否紧急：</td>
        <td>
          <span v-if="AppInformation.emergency === 0">否</span>
          <span v-if="AppInformation.emergency === 1">是</span>
        </td>
      </tr>
      <tr>
        <td>项目审批单：</td>
        <td class="RowHeight">
          <span class="iconfont iconColor">
            <span v-if="fileProjectHouZhui == 'jpg'">&#xe67c;</span>
            <span v-if="fileProjectHouZhui == 'pdf'">&#xe623;</span>
            <span v-if="fileProjectHouZhui == 'word'">&#xe640;</span>
            <span v-if="fileProjectHouZhui == 'ppt'">&#xe66b;</span>
            <span v-if="fileProjectHouZhui == 'xlsx'">&#xe679;</span>
            <span v-if="fileProjectHouZhui == 'zip'">&#xe61a;</span>
            <span v-if="fileProjectHouZhui == 'txt'">&#xe6e1;</span>
          </span>
          <span>{{ fileProject }}</span>
        </td>
      </tr>
      <tr>
        <td>产值确认单：</td>
        <td class="RowHeight">
          <span class="iconfont iconColor">
            <span v-if="fileValueHouZhui == 'jpg'">&#xe67c;</span>
            <span v-if="fileValueHouZhui == 'pdf'">&#xe623;</span>
            <span v-if="fileValueHouZhui == 'word'">&#xe640;</span>
            <span v-if="fileValueHouZhui == 'ppt'">&#xe66b;</span>
            <span v-if="fileValueHouZhui == 'xlsx'">&#xe679;</span>
            <span v-if="fileValueHouZhui == 'zip'">&#xe61a;</span>
            <span v-if="fileValueHouZhui == 'txt'">&#xe6e1;</span>
          </span>
          <span>{{ fileValue }}</span>
        </td>
      </tr>
      <tr>
        <td>审批人：</td>
        <td class="RowHeight clearFix">
          <div
            v-for="tou in AppInformation.auditFlowDetailMessage"
            :key="tou.id"
            class="tuoxiangxinxi"
          >
            <div><img :src="host + tou.touXiang" alt="图片加载失败" /></div>
            <div>{{ tou.name }}</div>
          </div>
        </td>
      </tr>
    </table>
    <!-- 日志 -->
    <table>
      <h5>日志</h5>
      <tr v-for="aa in journal" :key="aa.flowNum">
        <td class="tuoxiang">
          <img :src="host + aa.touXiang" alt="图片加载失败" />
        </td>
        <td class="touxiangText">
          <p>{{ aa.addTime }}</p>
          <p>{{ aa.processingLog }}</p>
        </td>
      </tr>
    </table>
    <div style="text-align: center; margin-top: 50px">
      <el-button type="primary" @click="Submitadopt">审核通过</el-button>
      <el-button type="primary" @click="Submitrefuse">审核拒绝</el-button>
      <el-button @click="ret">返回</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// 详情
export default {
  name: "CurrentPage",
  components: {},
  data() {
    return {
      host: axios.defaults.baseURL,
      AppInformation: [], //申请信息
      journal: [], //日志
      ApproverImage: [], //审批人
      information: [],
      fileProject: "", //项目
      fileProjectHouZhui: "",
      fileValue: "", //产值
      fileValueHouZhui: "",
    };
  },
  computed: {},
  methods: {
    //成功
    open2(str) {
      this.$message({
        message: str,
        type: "success",
      });
    },
    //错误
    open4(str) {
      this.$message.error(str);
    },
    ret() {
      sessionStorage.removeItem("flowNum");
      this.$router.go(-1); //返回上一层
    },
    editData() {
      let obj = {
        account: Number(JSON.parse(sessionStorage.getItem("employee")).account),
        flowNum: sessionStorage.getItem("flowNum"),
      };
      this.$batchApi.MyHandleGETData(obj).then((data) => {
        console.log(data.data);
        this.AppInformation = data.data.data;
        this.journal.push(data.data.data.processingLogTables[0]);

        let file1 = data.data.data.productionConfirmation;
        this.fileValueHouZhui = file1.substring(file1.lastIndexOf(".") + 1); //文件后缀
        this.fileValue = file1.substring(file1.lastIndexOf("/") + 1); //文件名

        let file2 = data.data.data.projectApprovalForm;
        this.fileProjectHouZhui = file2.substring(file2.lastIndexOf(".") + 1); //文件后缀
        this.fileProject = file2.substring(file2.lastIndexOf("/") + 1); //文件名
      });
    },
    hyperlinksClick() {
      let id = Number(this.AppInformation.constructionTeamContractId);
      this.$router.push({
        path: "/contract/buildTeam/editTeamDetailsContract",
        query: { id },
      });
    },
    tijaio(num) {
      var params = new URLSearchParams();
      params.append("employeeId", sessionStorage.getItem("employeeId"));
      params.append("flowNum", sessionStorage.getItem("flowNum"));
      params.append("auditStatus", num);

      this.$batchApi.MyHandleSubmit(params).then((data) => {
        console.log(data.data.data);
        this.$router.go(-1); //返回上一层
      });
    },
    Submitadopt() {
      this.tijaio(1);
    },
    Submitrefuse() {
      this.tijaio(0);
    },
  },
  created() {
    this.editData();
  },
};
</script>
<style scoped lang='less'>
* {
  font-size: 12px;
}
.box {
  margin-left: 10%;
  position: relative;
  table tr td,
  table tr th {
    text-align: left;
    padding-right: 50px;
  }
  .auditStatus {
    position: absolute;
    top: 0px;
    right: 15%;
    span {
      font-size: 24px;
    }
  }
  table > tr {
    height: 30px;
  }
  table > tr th:nth-child(1) {
    border-left: 5px solid #409eff;
    padding-left: 5px;
    margin: 10px 0;
  }
  table tr :nth-child(2) {
    color: #999;
  }
}
.box table:nth-child(3) {
  margin: 50px 0;
}
table h5 {
  border-left: 5px solid #409eff;
  padding-left: 10px;
  text-align: left;
  margin-bottom: 20px;
}
.yinhang {
  padding: 10px;
  box-sizing: border-box;
  background-color: #f2f2f2;
  border-radius: 5px;
}

// 审批人
.RowHeight > div {
  float: left;
}
.RowHeight {
  .tuoxiangxinxi {
    display: inline-block;
    width: 50px;
    margin-right: 20px;
    text-align: center;
    div:nth-child(1) {
      width: 50px;
      height: 50px;
      border-radius: 10%;
      overflow: hidden;
    }
    img {
      width: 50px;
    }
  }
}
// 日志
.tuoxiang {
  overflow: hidden;
  img {
    width: 50px;
  }
}
.touxiangText {
  padding-right: 0px !important;
  line-height: 25px;
}
.hyperlinks {
  color: rgb(55, 55, 245);
  cursor: pointer;
}
.hyperlinks:hover {
  text-decoration: underline;
}
.iconColor span {
  color: pink;
  font-size: 30px;
  margin-right: 5px;
}
</style>